import React, { Component } from "react";
import { Row, Col, Input, Select, Button, DatePicker } from "antd";
class SearchComps extends Component {
  state = {
    key: 0,
  };
  // 修改更新参数
  amendValue = (value, index) => {
    // this.props.searchComps[index].value = value;
    this.props.searchChange && this.props.searchChange(value, index);
  };
  allClearSearch = () => {
    this.props.searchComps.forEach((item) => {
      item.value = "";
    });
    this.props.searchChange && this.props.searchChange();
    setTimeout(() => {
      this.props.subSearch && this.props.subSearch();
    });
    this.setState({
      key: this.state.key + 1,
    });
  };
  subSearch = () => {
    this.props.subSearch && this.props.subSearch();
  };
  changeInput = (e, i) => {
    const inputValue = e.target.value;
    this.amendValue(inputValue, i);
  };
  changeSelect = (val, i) => {
    this.amendValue(val || "", i);
  };
  changeDatePicker = (value, dateString, i) => {
    this.amendValue(dateString, i);
  };
  changeRangePicker = (value, dateString, i) => {
    this.amendValue(dateString, i);
  };
  render() {
    const { key } = this.state;
    const { searchComps } = this.props;
    const { searchBtn = null } = this.props.children;
    return (
      <div
        style={{
          padding: " 10px 10px 0 10px",
        }}
        key={key}
      >
        <Row gutter={8}>
          
          {searchComps.map((item, i) => {
            switch (item.comType) {
              case "input":
                return (
                  <Col
                    key={i}
                    className="gutter-row"
                    span={3}
                    style={{
                      marginBottom: "10px",
                    }}
                  >
                    <Row type="flex" align="middle">
                      <Col
                        span={6}
                        style={{
                          textAlign: "center",
                          fontWeight: 600,
                        }}
                      >
                        
                        {item.label}
                      </Col>
                      <Col span={18}>
                        <Input
                          allowClear
                          type={item.inputType || "text"}
                          placeholder={item.placeholder}
                          value={item.value}
                          onChange={(e) => {
                            // item.value  =   e.target.value
                            // console.log( e.target.value,item)
                            this.changeInput(e, i,item);
                          }}
                        />
                      </Col>
                    </Row>
                  </Col>
                );
              case "datePicker":
                return (
                  <Col
                    key={i}
                    className="gutter-row"
                    span={3}
                    style={{
                      marginBottom: "10px",
                    }}
                  >
                    <Row type="flex" align="middle">
                      <Col
                        span={6}
                        style={{
                          textAlign: "center",
                          fontWeight: 600,
                        }}
                      >
                        
                        {item.label}
                      </Col>
                      <Col span={18}>
                        <DatePicker
                          style={{
                            width: "100%",
                          }}
                          format={item.format || "YYYY-MM-DD"}
                          allowClear
                          placeholder={item.placeholder}
                          onChange={(value, dateString) => {
                            this.changeDatePicker(value, dateString, i);
                          }}
                        />
                      </Col>
                    </Row>
                  </Col>
                );
              case "rangePicker":
                return (
                  <Col
                    key={i}
                    className="gutter-row"
                    span={5}
                    style={{
                      marginBottom: "10px",
                    }}
                  >
                    <Row type="flex" align="middle">
                      <Col
                        span={6}
                        style={{
                          textAlign: "center",
                          fontWeight: 600,
                        }}
                      >
                        
                        {item.label}
                      </Col>
                      <Col span={18}>
                        <DatePicker.RangePicker
                          placeholder={["开始时间", "结束时间"]}
                          style={{
                            width: "100%",
                          }}
                          showTime={{
                            format: "HH:mm",
                          }}
                          format={item.format || "YYYY-MM-DD HH:mm:ss"}
                          allowClear
                          onChange={(value, dateString) => {
                            this.changeRangePicker(value, dateString, i);
                          }}
                        />
                      </Col>
                    </Row>
                  </Col>
                );
              case "select":
                return (
                  <Col
                    key={i}
                    className="gutter-row"
                    span={3}
                    style={{
                      marginBottom: "10px",
                    }}
                  >
                    <Row type="flex" align="middle">
                      <Col
                        span={6}
                        style={{
                          textAlign: "center",
                          fontWeight: 600,
                        }}
                      >
                        
                        {item.label}
                      </Col>
                      <Col span={18}>
                        <Select
                          allowClear
                          style={{
                            width: "100%",
                          }}
                          placeholder={item.placeholder}
                          onChange={(e) => {
                            this.changeSelect(e, i);
                          }}
                        >
                          
                          {item.option.map((items, j) => {
                            return (
                              <Select.Option key={j} value={items.value}>
                                
                                {items.label}
                              </Select.Option>
                            );
                          })}
                        </Select>
                      </Col>
                    </Row>
                  </Col>
                );
              default:
                return "";
            }
          })}
          <Col
            className="gutter-row"
            span={4}
            style={{
              marginBottom: "10px",
            }}
          >
            <Button
              onClick={this.subSearch}
              type="primary"
              style={{
                marginRight: "10px",
              }}
            >
              查询
            </Button>
            <Button
              onClick={this.allClearSearch}
              type="primary"
              danger
              style={{
                marginRight: "10px",
              }}
            >
              清除
            </Button>
            {searchBtn && searchBtn}
          </Col>
        </Row>
      </div>
    );
  }
}

export default SearchComps;
